<template>
  <div class="menu">
    <div class="menu-top">
      <el-form
        :model="operation"
        ref="operation"
        label-width="70px"
        label-position="left"
        class="demo-menu"
      >
        <el-form-item label="业务名称">
          <el-input
            v-model="operation.name"
            placeholder="请输入业务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所处状态">
          <el-select v-model="operation.state" placeholder="所处状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="异常" value="异常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
          <el-button type="info" icon="el-icon-refresh" @click="resetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="menu-bottom">
      <el-button type="primary" icon="el-icon-plus">新增</el-button>
      <div class="menu-table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand" width="55">
            <template slot-scope="scope">
              <el-table
                :data="scope.row.children"
                style="width:100%"
                :show-header="false"
              >
                <el-table-column width="55"></el-table-column>
                <el-table-column
                  prop="a1"
                  label="菜单名称"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="a2"
                  label="图标"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="a3"
                  label="排序"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="a4"
                  label="权限标识"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="a5"
                  label="组件路径"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="a6"
                  label="状态"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="a7"
                  label="创建时间"
                  width="150"
                ></el-table-column>
                <el-table-column>
                  <template slot-scope="scope" label="操作">
                    <el-button
                      type="warning"
                      @click="notice(scope.$index, scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      type="success"
                      @click="handleEdit(scope.$index, scope.row)"
                      >新增</el-button
                    >
                    <el-button
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            prop="a1"
            label="菜单名称"
            width="150"
          ></el-table-column>
          <el-table-column prop="a2" label="图标" width="150"></el-table-column>
          <el-table-column prop="a3" label="排序" width="150"></el-table-column>
          <el-table-column
            prop="a4"
            label="权限标识"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="a5"
            label="组件路径"
            width="150"
          ></el-table-column>
          <el-table-column prop="a6" label="状态" width="150"></el-table-column>
          <el-table-column
            prop="a7"
            label="创建时间"
            width="150"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" @click="notice(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                type="success"
                @click="handleEdit(scope.$index, scope.row)"
                >新增</el-button
              >
              <el-button
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      operation: {
        name: "",
        state: "",
      },
      //数据
      tableData: [
        {
          a1: "系统管理",
          a2: "<i class='el-icon-edit'></i>",
          a3: "1",
          a4: "",
          a5: "",
          a6: "正常",
          a7: "2018-03-16 11:33:00",
          children: [
            {
              a1: "系统管理",
              a2: "<i class='el-icon-edit'></i>",
              a3: "1",
              a4: "system:user:list",
              a5: "system/user/index",
              a6: "正常",
              a7: "2018-03-16 11:33:00",
            },
            {
              a1: "系统管理",
              a2: "<i class='el-icon-edit'></i>",
              a3: "2",
              a4: "system:user:list",
              a5: "system/user/index",
              a6: "正常",
              a7: "2018-03-16 11:33:00",
            },
            {
              a1: "系统管理",
              a2: "<i class='el-icon-edit'></i>",
              a3: "3",
              a4: "system:user:list",
              a5: "system/user/index",
              a6: "正常",
              a7: "2018-03-16 11:33:00",
            },
          ],
        },
        {
          a1: "系统管理",
          a2: "<i class='el-icon-edit'></i>",
          a3: "2",
          a4: "",
          a5: "",
          a6: "正常",
          a7: "2018-03-16 11:33:00",
          children: [
            {
              a1: "系统管理",
              a2: "<i class='el-icon-edit'></i>",
              a3: "1",
              a4: "system:user:list",
              a5: "system/user/index",
              a6: "正常",
              a7: "2018-03-16 11:33:00",
            },
          ],
        },
        {
          a1: "系统管理",
          a2: "<i class='el-icon-edit'></i>",
          a3: "3",
          a4: "",
          a5: "",
          a6: "正常",
          a7: "2018-03-16 11:33:00",
          children: [
            {
              a1: "系统管理",
              a2: "<i class='el-icon-edit'></i>",
              a3: "1",
              a4: "system:user:list",
              a5: "system/user/index",
              a6: "正常",
              a7: "2018-03-16 11:33:00",
            },
          ],
        },
      ],
    };
  },
  methods: {
    //搜索
    search() {
      // //console.log(this.operation)
    },
    //重置
    resetForm() {},
    //修改
    notice(index, row) {},
    //编辑
    handleEdit(index, row) {},
    // 删除
    handleDelete(index, row) {},
  },
};
</script>

<style lang="less" scoped>
.menu {
  .menu-top {
    width: 100%;
    display: flex;
    .demo-menu {
      width: 900px;
      display: flex;
      justify-content: space-between;
    }
  }
  .menu-bottom {
    .menu-table {
      margin-top: 25px;
      /deep/.el-table--enable-row-transition /deep/.el-table__body td {
        padding: 0;
      }
      /deep/.el-table .cell {
        padding: 8px;
      }
    }
  }
}
</style>
